<!--
* description: 车籍查询明细
* author: ligy
* createdDate: 2020-12-1
* logs:
-->
<template>
  <section class="testDriver">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="true"
      :title="titleName"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closePopups"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :code="formField[comp.codeField]"
            :disabled="comp.disabled"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 24"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-params">
        <el-row ref="vailComponentList4" :gutter="26">
          <el-table
            :data="orderList"
            border
            style="width: 100%"
            max-height="300"
          >
            <el-table-column
              prop="changeDate"
              fixed="left"
              label="异动日期"
              width="160"
              align="center"
            />
            <el-table-column
              prop="changeTypeName"
              label="异动类型"
              align="center"
            />
            <el-table-column
              prop="changeNodeName"
              label="异动节点"
              align="center"
            />
            <!-- <el-table-column
              prop="sourcePlace"
              label="异动记录"
              align="center"
            /> -->
            <el-table-column
              prop="userName"
              label="操作人员"
              align="center"
            />
          </el-table>
        </el-row>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import api from '@/api/vehicleManagement'
export default {
  name: 'TDOrderApprovalEdit',
  components: {
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  // 组件混入对象
  mixins: [formMixins],
  props: {
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      titleName: '车籍查询明细',
      record: '',
      // h3标题行内样式
      styleObj: { borderLeft: null },
      // 订单列表
      orderList: [],
      //
      Filed: array => attr =>
        array.reduce((p, c) => {
          p[c[attr]] = ''
          return p
        }, {}),
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: 'compKey2',
          labelName: 'VIN：',
          codeField: 'vin',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey1',
          labelName: '车系编码：',
          codeField: 'carSeriesCode',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey3',
          labelName: '车系名称：',
          codeField: 'carSeriesCn',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey4',
          labelName: '基础车型编码：',
          codeField: 'carConfigCode',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey5',
          labelName: '基础车型名称：',
          codeField: 'carConfigCn',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey6',
          labelName: '选装包：',
          codeField: 'optionalPagName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey7',
          labelName: '车身颜色：',
          codeField: 'carColorName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey8',
          labelName: '内饰颜色：',
          codeField: 'carIncolorName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey9',
          labelName: '质量状态：',
          codeField: 'hostQualityState',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey10',
          labelName: '下线日期：',
          codeField: 'offlineDate',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey11',
          labelName: '生产日期：',
          codeField: 'produceDate',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey12',
          labelName: '入库日期：',
          codeField: 'firstInDlrStockDate',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey13',
          labelName: '订单编号：',
          codeField: 'saleOrderCode',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          validrule: { isPhone: true },
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey14',
          labelName: '客户名称：',
          codeField: 'custName',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey15',
          labelName: '销售计划号：',
          codeField: 'salesPlanCode',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 8
        }
      ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: {},
      initFormField: null
    }
  },
  watch: {
    curPopupsVisible(val) {
      this.$emit('update:popupsVisible', val)
    }
  },
  mounted() {
    let carId = ''
    this.genCodeFiled = this.genUtil(this.tableComponents)
    this.formField = this.genCodeFiled('codeField')
    this.formField = this.dataForForm
    carId = this.dataForForm.carId
    this.init(carId)
  },

  methods: {
    init(carId) {
      this.$requestAPI(this.$getParams({
        apiConfig: api.selectChangeInformation,
        variables: { carId }
      })).then(response => {
        if (response.result === '0') {
          if (response.msg) {
            this.$message({ message: response.msg, type: 'warn', uration: 2000 })
          }
          return
        }
        for (const k in response.rows) {
          if (response.rows[k].sourcePlace) {
            if (response.rows[k].targetPlace) {
              response.rows[k].sourcePlace = `${response.rows[k].sourcePlace}-->${response.rows[k].targetPlace}`
            } else {
              response.rows[k].sourcePlace = ''
            }
          }
        }
        this.orderList = response.rows
      }).catch(err => {
        console.info(err)
      })
    },
    genUtil: array => attr =>
      array.reduce((p, c) => {
        p[c[attr]] = ''
        return p
      }, {}),

    closePopups() {
      this.formField = this.genCodeFiled('codeField')
    }
  }
}
</script>
